<template>
  <f7-page>
    <f7-navbar title="选择房间" back-link="Back"></f7-navbar>
    <f7-block class="block1" v-for="(row, index) in roomRows" :key="index">
      <f7-row>
        <f7-col width="33" v-for="(room, index) in row" :key="index">
          <f7-button fill round @click="fangjianhao(room)">{{ room }}</f7-button>
        </f7-col>
      </f7-row>
    </f7-block>
  </f7-page>
</template>

<script>
import axios from "axios";
export default {
  name: "choose-room",
  data() {
    return {
      rooms: []
    };
  },
  mounted() {
    this.selectSpareRoomNumber();
  },

  computed: {
    roomRows() {
      const { rooms } = this;
      const result = [];
      for (let i = 0; i < rooms.length; i = i + 3) {
        const group = [];
        for (let j = 0; j < 3; j++) {
          const room = rooms[j + i];
          room && group.push(room);
        }
        result.push(group);
      }
      return result;
    }
  },
  methods: {
    fangjianhao(room) {
      const self = this;
      const app = self.$f7;
      this.$f7router.navigate("/confirmorder/");
      let apiCheckInRoom={
        room,
      }
      this.$store.commit("setapiCheckInRoom", apiCheckInRoom);
    },
    selectSpareRoomNumber() {
      const app = self.$f7;
      URL = "/caofuying/RoomNumber/selectSpareRoomNumber";
      axios
        .get(URL, {
          params: {
            type: this.$store.state.apiCheckIn.type
          }
        })
        .then(r => {
          const { data } = r;
          if (data != null) {
            this.rooms = data;
          } else {
            app.dialog.alert("服务器错误");
          }
        });
    }
  }
};
</script>
